<template>
<!-- <import src="../../view-new/partials/product_search.wxml"/> -->

<!-- <import src="../../view/partials/type_search.wxml"/> --><!-- type_search -->

<view class="container"> 
  

  
<!--   <template is="product_search" data="{{...topName,...setting}}"></template>  -->
  <!-- <template is="typeSearch" data="{{...setting.platformSetting.categories}}"></template>  -->
<!-- 头部 -->
 <view class="typeSearchContainer"> 
    <view class="typeSearch">
     <view class="flexCenter" data-index="0" @tap="bindProductType">分类<view class="border_right"></view></view>
     <view class="flexCenter" data-index="1" @tap="bindProductType">
        <block v-if="!!typeSearch">{{typeSearch}}</block>
        <block v-else>智能排序</block>
        <view class="border_right"></view>
     </view>
     <view class="flexCenter " data-index="2" @tap="bindProductType">
        <block v-if="!!s_price.startPrice || !!s_price.endPrice">
          <text class="smoprice">￥ {{s_price.startPrice}} - {{s_price.endPrice}}</text>
        </block>
        <block v-else>价格不限</block>
        <view class="border_right"></view>
     </view>
     <view class="flexCenter" @tap="bindProductshowWay">
        <block v-if="ProductshowWay == 1">
          <image src="https://image1.sansancloud.com/xianhua/2020_3/14/17/22/17_984.jpg?x-oss-process=style/preview_120"></image>
        </block>
        <block v-else>
          <image src="https://image1.sansancloud.com/xianhua/2020_3/14/17/22/17_962.jpg?x-oss-process=style/preview_120"></image>
        </block>
     </view>
    </view>

    <view class="typeSearch_view_height"></view>
  </view>

<!-- 分类 -->
  <view class="typeSearch_item_container" v-if="showType && show0">

     <view class="typeSearch_item_left_container">
        <view v-for="(type, index) in setting.platformSetting.categories" :key="index" :data-type="type" @tap="bindTypeItem" :class="(type.active?'active':'')">{{type.name}}</view>
     </view>
     <view class="typeSearch_item_right_container">
        <view :data-categoryId="focusTypeItem.id" @tap="searchProduct">全部</view>
        <view v-for="(child, index) in focusTypeItem.children" :key="index" :data-categoryId="child.id" @tap="searchProduct">{{child.name}}</view>
     </view>
  </view>

  <!-- 排序 -->
  <view class="typeSearch_item_container" v-if="showType && show1">
    <view class="typeSearch_Sort_container">
      <view data-orderType="0" @tap="searchProduct">默认排序</view>
      <view data-orderType="102" @tap="searchProduct">价格升序</view>
      <view data-orderType="2" @tap="searchProduct">价格降序</view>
      <view data-orderType="104" @tap="searchProduct">上架日期升</view>
      <view data-orderType="4" @tap="searchProduct">上架日期降</view>
      <view data-orderType="101" @tap="searchProduct">销量升</view>
      <view data-orderType="1" @tap="searchProduct">销量降</view>
    </view>
  </view>

    <!-- 价格排序 -->
  <view class="typeSearch_item_container" v-if="showType && show2">
    <view class="typeSearch_price_container">
      <view>
        <text>起始价</text>
        <input type="number" :style="'color:' + setting.platformSetting.defaultColor" @input="getStartValue" :value="s_price.startPrice" placeholder="不限制"></input>
      </view>
       <view>
        <text>最高价</text>
        <input type="number" :style="'color:' + setting.platformSetting.defaultColor" @input="getEndValue" :value="s_price.endPrice" placeholder="不限制"></input>
      </view>
      <button @tap="searchProductbyPrice" :style="'background:' + setting.platformSetting.defaultColor" hover-class="none" type="primary" size="default" :loading="loading"> 查询 </button>
    </view>
  </view>
  <view class="zhezhao" v-if="showType" @tap="closeZhezhao"></view>
  


    <block v-if="ProductshowWay == 1">
        <view class="product_page_container">
          <block v-if="!! productData">
            <view class="product_items" v-for="(result, index) in productData" :key="index" :data-info="result" :data-link="'product_detail.html?id=' + result.id" @tap="linkUrl">
              <image mode="aspectFit" :style="'height:' + sysWidth*44/100 + 'px;width:100%;'" :src="result.imagePath + '?x-oss-process=style/preview'"></image>
              <view>{{result.name}}</view>
              
              <view>
                <text class="price">￥{{result.price}}</text>
                <block v-if="result.price < result.tagPrice">
                  <text class="priceTagLine">￥{{result.tagPrice}}</text>
                </block>
              </view>
            </view>
          </block>
          <block v-else>
            <view class="noproduct">
              <image mode="widthFix" src="../../static/icons/no-product.png"></image>
              <text>没有相关商品</text>
            </view>
          </block>
        </view>
    </block>


    <block v-else>
     <view class="product_page_container2">
        <block v-if="!! productData">
          <view class="product_items2" :data-info="result"  :data-link="'product_detail.html?id=' + result.id" @tap="linkUrl" v-for="(result, index) in productData" :key="index">
            <image mode="aspectFill" :src="result.imagePath + '?x-oss-process=style/preview'"></image>
            <view class="product_items2_view1">
              
              <view>
                <text>{{result.name}}</text>
                  
              </view>
                <text class="price">￥{{result.price}}</text>
              <text class="font2">销量： {{result.saleCount}}</text>
            </view>
            
          </view>
        </block>

        <block v-else>
          <view class="noproduct">
            <image mode="widthFix" src="../../static/icons/no-product.png"></image>
            <text>没有相关商品</text>
          </view>
        </block>
      </view>
    </block>
  

</view>
</template>

<script>

export default {
  data() {
    return {
      setting: null,
      // setting   
      productData: [],
      // 商品数据 
      sysWidth: 320,
      //图片大小

      /* 显示或影藏 */
      showType: false,
      show0: false,
      show1: false,
      show2: false,
      topName: {
        SearchProductName: "" //头部搜索的

      },
      focusTypeItem: null,
      bindProductTypeIndex: null,
      ProductshowWay: 1,
      // ProductshowWay列表显示方法 
      typeSearch: '',
      // typeSearch的字体 
      s_price: {
        // 查询的价格 
        startPrice: "",
        endPrice: ""
      },

      /* 全部参数 */
      params: {
        categoryId: "",
        platformNo: "",
        belongShop: "",
        typeBelongShop: "",
        page: 1,
        showType: "",
        showColumn: "",
        productName: "",
        startPrice: "",
        endPrice: "",
        orderType: "",
        saleTypeId: "",
        promotionId: "",
        shopProductType: ""
      },
      listPage: {
        page: 1,
        pageSize: 0,
        totalSize: 0,
        curpage: 1
      }
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    if (!!options.productTypeId) {
      options.categoryId = options.productTypeId;
    }

    if (!!options.forceSearch && options.forceSearch == 2) {
      this.setData({
        ProductshowWay: 2
      });
    } else {
      this.setData({
        ProductshowWay: 1
      });
    }

    for (let i in options) {
      for (let j in this.params) {
        if (i.toLowerCase() == j.toLowerCase()) {
          this.params[j] = options[i];
        }
      }
    }

    console.log(this.params);
    this.getData(this.params, 2);
    this.setData({
      sysWidth: getApp().globalData.sysWidth
    });
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    this.setData({
      setting: getApp().globalData.setting
    });
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {},

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    this.listPage.page = 1;
    this.params.page = 1;
    this.getData(this.params, 2);
    wx.showNavigationBarLoading();
    wx.hideNavigationBarLoading(); //完成停止加载

    wx.stopPullDownRefresh(); //停止下拉刷新
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    var that = this;

    if (that.listPage.totalSize > that.listPage.curPage * that.listPage.pageSize) {
      that.listPage.page++;
      that.params.page++;
      this.getData(this.params);
    }
  },
  methods: {
    /* 点击分类 */
    bindProductType: function (e) {
      var index = e.currentTarget.dataset.index;

      if (index == this.bindProductTypeIndex) {
        this.showType = false;
        this.setData({
          showType: this.showType,
          bindProductTypeIndex: null
        });
      } else {
        this.showType = true;
        this.bindProductTypeIndex = index;

        if (index == 0) {
          this.show0 = true;
          this.show1 = false;
          this.show2 = false;
        } else if (index == 1) {
          this.show0 = false;
          this.show1 = true;
          this.show2 = false;
        } else if (index == 2) {
          this.show0 = false;
          this.show1 = false;
          this.show2 = true;
        }

        this.setData({
          show0: this.show0,
          show1: this.show1,
          show2: this.show2,
          showType: this.showType,
          bindProductTypeIndex: this.bindProductTypeIndex
        });
      }
    },

    /* 点击遮罩层 */
    closeZhezhao: function () {
      this.showType = false;
      this.setData({
        showType: false,
        bindProductTypeIndex: null
      });
    },

    /* 点击分类大项 */
    bindTypeItem: function (event) {
      console.log(event.currentTarget.dataset.type);

      for (let i = 0; i < this.setting.platformSetting.categories.length; i++) {
        if (this.setting.platformSetting.categories[i].id == event.currentTarget.dataset.type.id) {
          this.setting.platformSetting.categories[i].active = true;
        } else {
          this.setting.platformSetting.categories[i].active = false;
        }
      }

      this.setData({
        setting: this.setting
      });
      this.listPage.page = 1;
      this.params.page = 1;

      if (event.currentTarget.dataset.type.id == "all") {
        this.params.categoryId = '';
        this.getData(this.params, 2);
        this.setData({
          showType: false,
          bindProductTypeIndex: null
        });
        var allItem = {
          id: ""
        };
        this.setData({
          focusTypeItem: allItem
        });
      } else {
        this.setData({
          focusTypeItem: event.currentTarget.dataset.type
        });
        var focus = event.currentTarget.dataset.type;

        if (focus.children.length == 0) {
          this.params.categoryId = focus.id;
          this.getData(this.params, 2);
          this.setData({
            showType: false,
            bindProductTypeIndex: null
          });
        }
      }
    },
    ChangeParam: function (params) {
      var returnParam = "";

      for (let i in params) {
        returnParam += "&" + i + "=" + params[i];
      }

      console.log(returnParam);
      return returnParam;
    },

    /* 获取数据 */
    getData: function (param, ifAdd) {
      //根据把param变成&a=1&b=2的模式
      if (!ifAdd) {
        ifAdd = 1;
      } //var postParam = this.ChangeParam(param)
      //param.page = this.listPage.page


      var customIndex = getApp().globalData.AddClientUrl("/more_product_list.html", param, 'get', '1'); // wx.showLoading({
      //   title: 'loading'
      // })

      getApp().globalData.showToastLoading('loading', true);
      var that = this;
      wx.request({
        url: customIndex.url,
        header: getApp().globalData.header,
        success: function (res) {
          console.log(res.data);
          that.listPage.pageSize = res.data.pageSize;
          that.listPage.curPage = res.data.curPage;
          that.listPage.totalSize = res.data.totalSize;
          let dataArr = that.productData;

          if (ifAdd == 2) {
            dataArr = [];
          }

          if (!res.data.result || res.data.result.length == 0) {
            that.setData({
              productData: null
            });
          } else {
            if (dataArr == null) {
              dataArr = [];
            }

            dataArr = dataArr.concat(res.data.result);
            that.setData({
              productData: dataArr
            });
          }

          wx.hideLoading();
        },
        fail: function (res) {
          console.log("fail");
          wx.hideLoading();
          getApp().globalData.loadFail();
        }
      });
    },

    /* 查找商品 */
    getSearchProductName: function (e) {
      this.params.productName = e.detail.value;
      var that = this;
      var customIndex = this.more_product_list_URLFun(this.params);
      console.log(customIndex); // wx.showLoading({
      //   title: 'loading'
      // })

      getApp().globalData.showToastLoading('loading', true);
      wx.request({
        url: customIndex.url,
        header: getApp().globalData.header,
        success: function (res) {
          console.log("商品数据", res.data.result);
          wx.hideLoading();

          if (!res.data.result || res.data.result.length == 0) {
            that.setData({
              productData: null
            });
          } else {
            that.setData({
              productData: res.data.result
            });
          }
        },
        fail: function () {
          wx.hideLoading();
          getApp().globalData.loadFail();
        }
      });
    },

    /* 分类查询 */
    searchProduct: function (event) {
      var that = this;
      this.setData({
        showType: false,
        bindProductTypeIndex: null
      });
      console.log(event.currentTarget.dataset);
      var focusKey = event.currentTarget.dataset;
      console.log(this.params);

      for (let i in focusKey) {
        for (let j in this.params) {
          if (i.toLowerCase() == j.toLowerCase()) {
            this.params[j] = focusKey[i];
          }
        }
      }

      switch (this.params.orderType) {
        case '0':
          {
            this.setData({
              typeSearch: '默认排序'
            });
            break;
          }
          ;

        case '102':
          {
            this.setData({
              typeSearch: '价格升序'
            });
            break;
          }
          ;

        case '2':
          {
            this.setData({
              typeSearch: '价格降序'
            });
            break;
          }
          ;

        case '104':
          {
            this.setData({
              typeSearch: '上架日期升'
            });
            break;
          }
          ;

        case '4':
          {
            this.setData({
              typeSearch: '上架日期降'
            });
            break;
          }
          ;

        case '101':
          {
            this.setData({
              typeSearch: '销量升'
            });
            break;
          }
          ;

        case '1':
          {
            this.setData({
              typeSearch: '销量降'
            });
            break;
          }
          ;
      }

      console.log(this.params);
      this.params.page = 1;
      var customIndex = this.more_product_list_URLFun(this.params);
      console.log(customIndex); // wx.showLoading({
      //   title: 'loading'
      // })

      getApp().globalData.showToastLoading('loading', true);
      that.listPage.page = 1;
      that.params.page = 1;
      wx.request({
        url: customIndex.url,
        header: getApp().globalData.header,
        success: function (res) {
          that.listPage.pageSize = res.data.pageSize;
          that.listPage.curPage = res.data.curPage;
          that.listPage.totalSize = res.data.totalSize;
          console.log(res.data);
          wx.hideLoading();

          if (!res.data.result || res.data.result.length == 0) {
            that.setData({
              productData: null
            });
          } else {
            let dataArr = [];
            dataArr = dataArr.concat(res.data.result);
            that.setData({
              productData: dataArr
            });
          }
          /* if (!res.data.result || res.data.result.length == 0) {
            that.setData({ productData: null })
          } else {
            that.setData({ productData: res.data.result })
          } */

        },
        fail: function () {
          wx.hideLoading();
          getApp().globalData.loadFail();
        }
      });
    },
    more_product_list_URLFun: function (params) {
      let resule = getApp().globalData.AddClientUrl("/more_product_list.html", params);
      return resule;
    },

    /* 价格排序 */
    getStartValue: function (e) {
      this.s_price.startPrice = e.detail.value;
    },
    getEndValue: function (e) {
      this.s_price.endPrice = e.detail.value;
    },
    searchProductbyPrice: function () {
      var that = this;
      this.setData({
        showType: false,
        bindProductTypeIndex: null
      });
      var focusKey = this.s_price;
      console.log(this.params);

      for (let i in focusKey) {
        for (let j in this.params) {
          if (i.toLowerCase() == j.toLowerCase()) {
            this.params[j] = focusKey[i];
          }
        }
      }

      console.log(this.params);
      var customIndex = this.more_product_list_URLFun(this.params);
      console.log(customIndex);
      wx.request({
        url: customIndex.url,
        header: getApp().globalData.header,
        success: function (res) {
          console.log(res.data);

          if (!res.data.result || res.data.result.length == 0) {
            that.setData({
              productData: null
            });
          } else {
            that.setData({
              productData: res.data.result
            });
          }

          that.setData({
            s_price: that.s_price
          });
        }
      });
    },

    /* 商品显示方法 */
    bindProductshowWay: function () {
      if (this.ProductshowWay == 1) {
        this.setData({
          ProductshowWay: 2
        });
      } else {
        this.setData({
          ProductshowWay: 1
        });
      }
    },
    toProductDetail: function (event) {
      console.log("--------toProductDetail------");
      console.log(event.currentTarget.dataset.info);
      var info = event.currentTarget.dataset.info;
      wx.navigateTo({
        url: '../../pages/productDetail/index?id=' + info.id + "&addShopId=" + info.belongShopId
      });
    },
    linkUrl: function (e) {
      console.log("===e====", e);
      let linkUrl = e.currentTarget.dataset.link;

      if (linkUrl == "search_page.html") {
        this.setData({
          reqSearch: true
        });
      }

      getApp().globalData.linkEvent(linkUrl);
    },
    setData: function (obj) {
      let that = this;
      let keys = [];
      let val, data;
      Object.keys(obj).forEach(function (key) {
        keys = key.split('.');
        val = obj[key];
        data = that.$data;
        keys.forEach(function (key2, index) {
          if (index + 1 == keys.length) {
            that.$set(data, key2, val);
          } else {
            if (!data[key2]) {
              that.$set(data, key2, {});
            }
          }

          data = data[key2];
        });
      });
    }
  }
};
</script>
<style>
@import "./index.css";
</style>